import { FC, useState } from "react";
import { Table, Button, TableColumnsType, Space, Typography, Modal, Spin, message } from "antd";
import TablePageConfig from "../components/TablePageConfig";
import { ExclamationCircleFilled } from '@ant-design/icons'
import useLoadQuestionList from "../hooks/useLoadQuestionList";
import SearchContainer from "../components/Search";
import { changeQuestion,deleteQuestions } from "../service";
import classnames from 'classnames/bind'
import style from './pages.module.scss'
import { useRequest } from "ahooks";
const CBN = classnames.bind(style)
const { Title } = Typography
export type QuestionCardType = {
  _id: string;
  title: string;
  count: number;
  ispublished: boolean;
  start: boolean;
  deleted: boolean;
  createTime: string;
};
const columns: TableColumnsType<QuestionCardType> = [
  {
    title: "标题",
    dataIndex: "title",
  },
  {
    title: "是否发布",
    dataIndex: "ispublished",
  },
  {
    title: "答卷",
    dataIndex: "count",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
];
const TrashPages: FC = () => {
  const { data, loading,refresh } = useLoadQuestionList({ start: false, trash: true })
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const { confirm } = Modal
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const {run:deleteAllQuestions} = useRequest((ids:string[])=>{
    return deleteQuestions(ids)
  },{
    manual:true,
    onSuccess(){
      message.success('恢复成功')
      setSelectedRowKeys([])
      refresh()
    }
  })
  const selectedToDelete = () => {
    confirm({
      title: '确实是否移除回收站?',
      icon: <ExclamationCircleFilled />,
      content: '删除后无法找回',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        deleteAllQuestions(selectedRowKeys as string[])
      },
    })
  }

  const {run:recoverQuestion,loading:recoverQuestion_loading} = useRequest(async ()=>{
    for await (const id of selectedRowKeys) {
      await changeQuestion(id.toString());
    }
  },{
    manual:true,
    onSuccess(data){
      message.success('恢复成功')
      setSelectedRowKeys([])
      refresh()
    }
  })

  const selectedToRecover = () => {
    recoverQuestion()
  }
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className={CBN('TrashPages')}>
      <div className={CBN('top')}>
        <div className="left">
          <Title>回收站问卷</Title>
        </div>
        <div className="right">
          <SearchContainer></SearchContainer>
        </div>
      </div>
      <div className={CBN('container')}>
        {loading ? <Spin></Spin> : <>
        <Space style={{marginBottom:'10px',width:'100%',textAlign:'left'}}>
          <Button
            type="primary"
            disabled={!hasSelected}
            onClick={selectedToRecover}
          >
            恢复
          </Button>
          <Button
            type="primary"
            disabled={!hasSelected}
            onClick={selectedToDelete}
          >
            选中删除
          </Button>
        </Space>
        <Table
          loading = {recoverQuestion_loading}
          rowKey="_id"
          pagination={false}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data && data.list}
        />
        </>}
      </div>
      <div className={CBN("footer")} >
        <TablePageConfig total={54}></TablePageConfig>
      </div>
    </div>
  );
};

export default TrashPages;
